<template>
  <div class="container mx-auto w-4/5 py-4">
    <a-row id="featureSection" class="w-full min-h-[200px] mt-[50px] text-center">
      <a-space id="contentWrapper" direction="vertical" align="center" class="w-full">
        <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold leading-[100px] !mb-0">
          用短书全渠道同步经营，解决流量获客痛点
        </a-typography-title>

        <a-typography-text id="subTitle" class="!text-xl !text-gray-500 !-mt-2.5 !block"> 公域营销转化，私域转化裂变 </a-typography-text>

        <img id="featureImage" src="https://picsum.photos/id/237/1040/260" alt="运营示意图" class="w-full h-[300px] mt-5" />
      </a-space>
    </a-row>

    <a-row id="featureSection" class="w-full min-h-[200px] mt-[50px] text-center">
      <a-space id="contentWrapper" direction="vertical" align="center" class="w-full">
        <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold leading-[100px] !mb-0">
          市场和销售、课程与服务、学员生命周期的完整闭环
        </a-typography-title>
      </a-space>

      <a-row id="contentWrapper" class="flex !mx-0">
        <!-- 左侧文本区域 -->
        <a-col :span="14" id="textSection" class="!pr-12">
          <a-space id="textContent" direction="vertical" align="start" class="text-left">
            <a-typography-text id="textPart1" class="!text-lg !block !py-2.5">
              文本文本文本文本文本文本文本文本文本文本文本文本文本文
            </a-typography-text>
            <a-typography-text id="textPart2" class="!text-lg !block !py-2.5">
              文本文本文本文本文本文本文本文本文本文本文本文本文本文
            </a-typography-text>
            <a-button id="experienceButton" type="primary" size="large" class="!mt-2.5"> 免费体验 </a-button>
          </a-space>
        </a-col>

        <!-- 中间分隔线 -->
        <a-col id="divider" class="!w-px !h-auto !bg-green-500 !mx-8" />

        <!-- 右侧功能区块 -->
        <a-col :span="8" id="featuresSection">
          <a-row :gutter="16">
            <a-col v-for="(_, index) in 3" :key="index" :span="24" :id="`block${index + 1}`">
              <a-space direction="vertical" class="text-left">
                <a-typography-title :id="`featureTitle${index + 1}`" :level="4" class="!text-lg !font-bold !m-2.5">
                  营销和获客
                </a-typography-title>
                <a-typography-text :id="`featureDesc${index + 1}`" class="!text-sm !text-gray-500 !m-2.5">
                  新一代数字化营销驱动,大幅降低获客成本
                </a-typography-text>
                <a-space :id="`icons${index + 1}`" wrap>
                  <img
                    v-for="(_, imgIndex) in 5"
                    :key="imgIndex"
                    :id="`featureImage${index + 1}_${imgIndex + 1}`"
                    src="https://picsum.photos/id/237/520/260"
                    class="w-12 h-12 !m-2.5"
                  />
                </a-space>
              </a-space>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-row>

    <a-row id="servicesSection" class="w-full min-h-[200px] mt-[50px] text-center">
      <a-space id="contentWrapper" direction="vertical" align="center" class="w-full mb-4">
        <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold leading-[100px] !mb-0">
          致力于为商家提供更好的服务
        </a-typography-title>
      </a-space>

      <template v-for="(row, rowIndex) in 2" :key="rowIndex">
        <a-row :id="'serviceRow' + (rowIndex + 1)" class="flex justify-between mb-15" :gutter="120">
          <a-col v-for="(item, index) in 4" :key="index" :span="6" :id="'serviceCol' + (index + 1 + rowIndex * 4)" class="mb-9">
            <a-space direction="vertical" align="center" :id="'serviceItem' + (index + 1 + rowIndex * 4)">
              <img
                :id="'serviceImg' + (index + 1 + rowIndex * 4)"
                src="https://picsum.photos/id/237/520/260"
                alt="服务图标"
                class="w-[200px] h-[120px]mb-5"
              />
              <a-typography-title :id="'serviceTitle' + (index + 1 + rowIndex * 4)" :level="4" class="!text-xl !mb-0">
                专业客服答疑
              </a-typography-title>
              <a-typography-text :id="'serviceDesc' + (index + 1 + rowIndex * 4)" class="!text-gray-500 !block">
                远程1对1指导
              </a-typography-text>
            </a-space>
          </a-col>
        </a-row>
      </template>
    </a-row>

    <a-row id="customerSection" class="w-full min-h-[200px] mt-[50px] text-center bg-[#f8fafe] pb-[50px]">
      <a-space id="contentWrapper" direction="vertical" align="center" class="w-full mb-4">
        <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold !pt-[100px] !mb-0"> 他们都在用短书 </a-typography-title>
        <a-typography-text id="subTitle" class="!text-lg !text-gray-500 !block"> 更好地服务，铸就更好地信任 </a-typography-text>
      </a-space>

      <!-- 数据统计 -->
      <a-row id="statsRow" class="!flex !justify-around !mt-8 w-full">
        <a-col :span="6" v-for="(stat, index) in stats" :key="index" :id="`statsCol${index + 1}`">
          <a-space direction="vertical">
            <a-typography-title :id="`statsNumber${index + 1}`" :level="1" class="!text-4xl !font-bold !mb-0">
              {{ stat.number }}
            </a-typography-title>
            <a-typography-text :id="`statsText${index + 1}`" class="!text-sm !text-gray-500 !mt-5">
              {{ stat.label }}
            </a-typography-text>
          </a-space>
        </a-col>
      </a-row>

      <!-- 品牌网格 -->
      <a-row id="brandGrid" class="!mx-auto !w-11/12 !mt-8">
        <template v-for="(row, rowIndex) in 2" :key="rowIndex">
          <a-row :id="`gridRow${rowIndex + 1}`" class="!flex !flex-wrap !justify-center !gap-4 !my-4">
            <a-col
              :span="3"
              v-for="(item, colIndex) in 7"
              :key="colIndex"
              :id="`gridItem${rowIndex + 1}-${colIndex + 1}`"
              class="!w-[150px] !h-[150px] !border !border-gray-300 !bg-white !flex !items-center !justify-center"
            >
              <a-space direction="vertical" align="center">
                <img :id="`gridImg${rowIndex + 1}-${colIndex + 1}`" src="https://picsum.photos/id/237/520/260" class="!w-12 !h-12" />
                <a-typography-text :id="`gridText${rowIndex + 1}-${colIndex + 1}`" class="!mt-5"> 文本 </a-typography-text>
              </a-space>
            </a-col>
          </a-row>
        </template>
      </a-row>
    </a-row>

    <a-row id="testimonialSection" class="w-full min-h-[200px] mt-[50px] text-center pb-[50px] relative">
      <a-space id="contentWrapper" direction="vertical" align="center" class="w-full mb-4">
        <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold !pt-[100px] !mb-0"> 短书的客户这样说 </a-typography-title>
      </a-space>

      <a-row id="contentWrapper" class="flex relative">
        <!-- 主图 -->
        <a-col id="mainImageContainer" class="!flex !justify-center">
          <img id="mainImage" src="https://picsum.photos/id/237/520/260" class="w-[400px] h-[500px] object-cover" />
        </a-col>

        <!-- 次级图片组 -->
        <a-row id="secondaryImages" class="absolute top-[100px] left-[300px] flex w-[950px]">
          <a-col :span="7" v-for="n in 3" :key="n" :id="`secondaryImageCol${n}`" class="">
            <img :id="`secondaryImage${n}`" src="https://picsum.photos/id/236/520/260" class="w-[230px] h-[300px] m-[30px]" />
          </a-col>
        </a-row>
      </a-row>
    </a-row>

    <a-row id="recommendSection" class="w-full mt-[50px] text-center pb-[50px]">
      <a-space id="contentWrapper" direction="vertical" align="center" class="w-full mb-4">
        <a-typography-title id="mainTitle" :level="2" class="!text-3xl !font-bold !mb-[50px]"> 更多资讯推荐 </a-typography-title>
      </a-space>

      <a-row id="recommendCards" class="flex justify-between">
        <a-col v-for="n in 4" :key="n" :id="`recommendCard${n}`" class="!w-[300px] !h-[100px] border-1 !border-gray-300 !flex !flex-col">
          <a-space direction="vertical" class="text-left">
            <a-typography-title :id="`recommendTitle${n}`" :level="4" class="!text-base !mb-0 !px-2.5">
              在线教育怎么做？
            </a-typography-title>
            <a-typography-text :id="`recommendDesc${n}`" class="!text-gray-500 !block !px-2.5 !py-1">
              在线教育怎么做?在线教育是一个相对成熟的业务模式，不再是简....
            </a-typography-text>
          </a-space>
        </a-col>
      </a-row>
    </a-row>
    <a-row id="ctaSection" class="w-full mt-[50px] pb-[50px] text-center">
      <a-col id="contentWrapper" class="min-h-[200px] bg-[#1d8def] w-full">
        <a-typography-title id="ctaTitle" :level="2" class="!text-3xl !font-bold !mb-[50px] !text-white !pt-[50px]">
          获取知识和教育领域的全域增长运营方案
        </a-typography-title>

        <a-input-search id="phoneInput" placeholder="输入您的手机号" class="!w-[400px]">
          <template #enterButton>
            <a-button id="submitButton" class="!bg-white !text-[#1d8def]"> 领取方案 </a-button>
          </template>
        </a-input-search>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="jsx">
  const stats = [
    { number: '20万+', label: '优质用户' },
    { number: '5000万+', label: '终端学员' },
    { number: '1亿+', label: '安全流水' },
    { number: '7000万+', label: '内容产出' },
  ];
</script>

<style>
/* 使用Tailwind覆盖默认样式 */
.ant-card-body {
  @apply p-4;
}
.ant-typography {
  @apply mb-0;
}
</style>
